var checkText

//活动用户关联信息的函数


function getMoreContents() {
    //xmlHttp
    var xmlHttp;
    //首先要获得用户输入
    var content = document.getElementById("keyword");
    checkText = $("#type").find("option:selected").text();
    if (content.value == "") {
        //如果元素是空，也可清空一下
        clearContent();
        return;
    }
    //然后给服务器发送数据
    //需要一个xmlHttp对象
    xmlHttp = createXmlHttp();


    // 给服务器发送数据,定义url
    var url = "http://127.0.0.1:5000/searKeyWordBySpell?key=" + content.value;
    //true表示在调用send()方法后会继续执行
    xmlHttp.open("GET", url, true);
    //xmlHttp绑定的回调方法，这个回调方法会在xmlHttp状态改变时被调用
    //xmlhttp状态0-4，我们只关心4（代表完成.当数据传输完成之后再回调才有意义
    xmlHttp.onreadystatechange = callback;
    xmlHttp.send(null);


    // 回调函数
    function callback() {
        // 完成状态为4
        if (xmlHttp.readyState == 4) {
            // 服务器响应成功
            if (xmlHttp.status == 200) {
                //获得数据
                var result = xmlHttp.responseText;
                // console.log(result)
                //解析数据，只有加上()js才能认识Java传输的json
                var json = eval("(" + result + ")");

                console.log(result)
                //获得数据后就可以动态的展示数据到输入框的下面
                //alert(json);
                // 把json数据展示出来
                if (json.length > 0) {
                    setContent(json);
                } else {
                    //清空边框
                    document.getElementById("popDiv").style.border = 0;
                }


            }
        }
    }


}

function createXmlHttp() {
    var xmlHttp;
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("MircoSoft.XMLHTTP");
        if (!xmlHttp) {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
    return xmlHttp;
}

//设置展示数据
function setContent(contents) {

    //设置数据前先清空
    clearContent();

    //设置显示位置
    setLocation();

    var size = contents.length;  // 数据长度，来确定显示的条数

    for (var i = 0; i < size; i++) {
        <!-- alert(i + ":" + contents[i] ) -->
        // 代表json的第几个元素
        var nextNode = contents[i];
        // 动态生成tr，td
        var tr = document.createElement("tr");
        var td = document.createElement("td");
        // 设置样式
        td.setAttribute("border", "0");
        td.setAttribute("bgcolor", "#FFFAFA");

        // 鼠标进来的时候
        td.onmouseover = function () {
            console.log('mouseover');
            console.log(this);
            this.className = 'mouseOver';
        };
        //鼠标移出的时候
        td.onmouseout = function () {
            console.log('mouseout');
            console.log(this);
            this.className = 'mouseOut';
        };

        td.onmousedown = function (e) {
            //当用户鼠标点击关联数据框时，自动输入关联数据
            // alert(1)
            console.log(e.target.innerHTML);
            document.getElementById("keyword").value = e.target.innerHTML;
        };

        // 创建文本节点

        var text = document.createTextNode(nextNode);
        td.appendChild(text);
        tr.appendChild(td);
        //内容区的id 》》content_table_body
        document.getElementById("content_table_body").appendChild(tr);


    }

}

//请空之前的数据
function clearContent() {
    // 获取显示框id
    var contentTableBody = document.getElementById("content_table_body");
    // 获取显示得条数
    var size = contentTableBody.childNodes.length;
    // 循环删除，从后往前删除
    for (var i = size - 1; i >= 0; i--) {
        contentTableBody.removeChild(contentTableBody.childNodes[i])
    }
    //清空边框
    document.getElementById("popDiv").style.border = 0;
}

//当输入框失去焦点时
function keywordblur() {
    clearContent();
}


// 设置关联信息得位置
function setLocation() {
    // 关联信息得显示位置要和输入框一致
    var content = document.getElementById("keyword");
    var width = content.offsetWidth;  // 输入框得宽度
    var left = content["offsetLeft"];  // j距离左边框得距离
    var top = content["offsetTop"] + content.offsetHeight;  // 距离顶部得距离
    var popDiv = document.getElementById("popDiv");  // 获得显示数据得div
    // 美化边框
    popDiv.style.border = "black 1px solid";  //
    popDiv.style.left = left + "px";
    popDiv.style.top = top + "px";
    popDiv.style.width = width + "px";
    document.getElementById("content_table").style.width = width + "px";
}

let tags = [];
let tagContainer = document.querySelector('.tag-container');
let input = document.querySelector('input');

input.addEventListener('keyup', addTags);

function addTags(event) {
    const keyPressedIsEnter = event.key === 'Enter'

    if (keyPressedIsEnter) {
        input.value.split(',').forEach(tag => tag && tags.push([checkText, tag.trim()]))
        updateTags();
        input.value = '';
    }
}

function updateTags() {
    clearTags();
    tags.slice().reverse().forEach(tag => {
        tagContainer.prepend(createTag(tag));
    });
}

function createTag(tag) {
    const div = document.createElement('div');
    div.classList.add('tag');
    const span = document.createElement('span');
    span.innerHTML = tag[0] + "-" + tag[1]
    const i = document.createElement('i');
    i.classList.add('close');
    i.setAttribute('data-id', tag);
    i.onclick = removeTag
    span.append(i);
    div.append(span);
    return div;
}

function removeTag(event) {
    const buttonX = event.currentTarget;
    const id = buttonX.dataset.id;
    const index = tags.indexOf(id);

    tags.splice(index, 1);

    updateTags();
}

function clearTags() {
    tagContainer
        .querySelectorAll('.tag')
        .forEach(tagElement => tagElement.remove());
}

$(document).ready(function () {
    $("#send_disease").click(function () {
        var list = {"msg": tags}
        $.ajax({
            url: "http://localhost:5000/disease",
            data: JSON.stringify(list),
            type: "POST",
            success: function (result) {
                describe_msg(result);
            }
        })
    })
})


function describe_msg(data) {
    $(document).ready(function () {
        $("#msg").hide();
        const msg =document.createElement("div");
        msg.id="msg";
        $("#describe").after(msg);

        const msg_4=document.createElement("div");
        const span7 = document.createElement("span");
        span7.innerHTML=data["type"];
        msg_4.append(span7);

        const msg_1 = document.createElement("div");
        const span1 = document.createElement("span");
        span1.innerHTML="主症：";
        msg_1.append(span1);
        for(var i=0;i<data["主症"].length;i++){
            const span2 = document.createElement("span");
            span2.innerHTML=data["主症"][i]+"，";
            msg_1.append(span2);
        }
        const msg_2=document.createElement("div");
        const span3 = document.createElement("span");
        span3.innerHTML="治法：";
        msg_2.append(span3);
        const span4 = document.createElement("span");
        span4.innerHTML=data["治法"];
        msg_2.append(span4);
        const msg_3=document.createElement("div");
        const span6 = document.createElement("span");
        span6.innerHTML="方剂：";
        msg_3.append(span6);
        for (var i=0;i<data["方剂"].length;i++){
            const span5 = document.createElement("span");
            span5.innerHTML=data["方剂"][i]["name"]+"，";
            span5.id=data["方剂"][i]["id"];
            span5.classList.add("getDrug");
            msg_3.append(span5);
        }

        const msg_5=document.createElement("div");
        const span8 = document.createElement("span");
        span8.innerHTML="加减：";
        msg_5.append(span8);
        const span9 = document.createElement("span");
        span9.innerHTML=data["加减"];
        msg_5.append(span9);



        msg.append(msg_4,msg_1,msg_2,msg_3,msg_5);


        var drug_msg;
        $(".getDrug").click(function(){
            $.ajax({
                url: "http://localhost:5000/get_drug/"+$(this).attr('id'),
                type: "GET",
                success: function (result) {
                    $("#")
                    const div1 = document.createElement("div");
                    const p1 = document.createElement("p");
                    p1.innerHTML=result["msg"];
                    div1.append(p1);
                    const button = document.createElement("button")
                    button.id="click_drug";
                    button.innerHTML="添加药方为处方";
                    div1.append(button);
                    drug_msg = result["drug"];
                    $("#drug").after(div1);

                    $("#click_drug").click(function (){
                        // $("#cf").
                    });
            }
            })
        });

    });
}

